<template>
  <div id="app">
    <!-- 头部组件 -->
    <MyHeader
      color="#fff"
      title="班长的购物车"
      backgroundColor="#0094ff"
    ></MyHeader>

    <!-- 商品列表 -->
    <div class="main">
      <!-- 商品项 -->
      <MyGoods v-for="pro in proList" :key="pro.id" :proObj="pro"></MyGoods>
    </div>

    <!-- 尾部组件 -->
    <MyFooter :list="proList"></MyFooter>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import MyGoods from "./components/MyGoods.vue";
import MyFooter from "./components/MyFooter.vue";

export default {
  name: "App",
  components: {
    MyHeader,
    MyGoods,
    MyFooter,
  },
  data() {
    return {
      // 商品数组
      proList: [],
    };
  },
  // 钩子函数：相当于 vue 的 "入口函数"
  created() {
    // 请求接口，获取 购物车商品数组
    this.$axios({
      method: "get",
      url: "/api/cart",
    }).then((res) => {
      // const proList = res.data.list;
      const { data } = res;
      // 将 返回的商品数组 设置给 data.proList，方便 视图使用
      this.proList = data.list;
    });
  },
};
</script>

<style lang="less">
.main {
  margin-top: 45px;
}
</style>
